<template>
  <view>
   <video id="preview" style=" width: 100%;" autoplay="autoplay" :src="src"></video>
  </view>
</template>

<script>
	import HlsVideoPlayer from "../../components/liusheng22-HlsVideoPlayer/liusheng22-HlsVideoPlayer.vue";
// 将xx秒转为 xx:xx 分秒格式
const formatSec2Time = (time) => {
  const min = Math.floor(time / 60)
  const sec = Math.floor(time % 60)
  return `${min}:${sec < 10 ? '0' + sec : sec}`
}
import {
		getCameraInfo,queryCameraInfoById
	} from "@/api/index"
export default {
	components:{HlsVideoPlayer}, 
  data() {
    return {
      src: 'http://211.103.114.94:83/openUrl/Bf5Qysw/live.m3u8',
      playing: false,
      controls: true,
      autoplay: false,
      playbackRate: 1,
      currentTime: 0,
	  id:null,
	  form:{},
    }
  },
  onLoad: function (option) {
  	this.id = JSON.parse(option.item).id;
  			},
 onReady() {
 	this.getServerData1();
 },
  methods: {
	  getServerData1() {
	  	
	  	this.form.type = "hls"
	  	this.form.id = this.id
	  	
	  // 	getCameraInfo(this.form).then(response => {
	  // 		// 使用示例
			
	  // 		console.info('aaaaaaa',response)
			// this.src = response.data.url
	  		
	  // 	})
		queryCameraInfoById(this.form).then(response => {
	  		// 使用示例
			
	  		console.info('',response)
			this.src = response.url
	  		this.doPlaying();
	  	})
	  	setTimeout(function() {
	  		uni.hideLoading();
	  	}, 500);
	  
	  },
    // 播放 - 事件
    onPlay() {
      console.log('onPlay')
      this.playing = true
    },
    // 暂停 - 事件
    onPause() {
      console.log('onPause')
      this.playing = false
    },
    // 播放完毕 - 事件
    onEnded() {
      console.log('onEnded')
      this.playing = false
    },
    // 播放时间更新 - 事件
    onTimeUpdate(e) {
      // console.log('onTimeUpdate', e)
      this.currentTime = e
    },
    // 倍速变化 - 事件
    onRateChange(e) {
      console.log('onRateChange', e)
      this.playbackRate = e
    },
    // 进入/退出全屏 - 事件
    onFullscreenChange(e) {
      console.log('onFullScreenChange', e)
    },
    // hls 视频加载完成
    onHlsManifestParsed() {
      console.log('onHlsManifestParsed')
    },
    // hls 视频加载错误
    onHlsError(e) {
      console.log('onHlsError', e)
    },


    // 切换播放/暂停 - 函数
    doPlaying() {
      const hlsVideoPlayer = this.$refs.hlsVideoPlayer
      if (hlsVideoPlayer.playing) {
        this.doPause()
      } else {
        this.doPlay()
      }
    },
    // 播放 - 函数
    doPlay() {
      const hlsVideoPlayer = this.$refs.hlsVideoPlayer
      console.log("🚀 ~ doPlay ~ hlsVideoPlayer:", hlsVideoPlayer)
      hlsVideoPlayer.play()
    },
    // 暂停 - 函数
    doPause() {
      const hlsVideoPlayer = this.$refs.hlsVideoPlayer
      hlsVideoPlayer.pause()
    },
    // 快退/快进 - 函数
    doSeek(time) {
      const hlsVideoPlayer = this.$refs.hlsVideoPlayer
      time += hlsVideoPlayer.currentTime
      hlsVideoPlayer.toSeek(time)
    },
    // 全屏播放 - 函数
    doFullScreen() {
      const hlsVideoPlayer = this.$refs.hlsVideoPlayer
      hlsVideoPlayer.fullScreen()
    },
    // 移除视频 - 函数
    doRemove() {
      this.src = ''
      const hlsVideoPlayer = this.$refs.hlsVideoPlayer
      hlsVideoPlayer.remove()
    },
    // 更换src - 函数
    doUpdateSrc() {
      this.src = 'http://211.103.114.94:83/openUrl/GGLhQLC/live.m3u8'
    },
    // 切换倍速 - 函数
    switchRate() {
      this.playbackRate = this.playbackRate === 1 ? 2 : 1
    },
    // 切换视频控制栏 - 函数
    switchControls() {
      this.controls = !this.controls
    }
  }
}
</script>

<style scoped>
.action-box {
  margin-top: 30rpx;
  padding: 0 60rpx;
}

.action-box button {
  margin-top: 10rpx;
}
</style>
